/*
  index.js: webpack入口起点文件

  1. 运行指令：
    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是开发环境
    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是生产环境

   2. 结论：
    1. webpack能处理js/json资源，不能处理css/img/html等其他资源
    2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
    3. 生产环境比开发环境多一个压缩js代码。  ==>kb变小
*/
// import './index.css'; // 如果没有 css处理的loader 打包会直接报错
import $ from "jquery"
import './css/css.css';
import './css/css2.css';
import './css/index.less';
import data from './js/data.json';
import { cheng, jian } from './js/test';
import test3 from "./js/test3"
// import test3 from "@/js/test3"
console.log("jquery:",$)
console.log(data);
function add(x, y) {
  return x + y;
}
//babel  es6=> es5
const fuc = ()=>{
  console.log("1321313")
  console.log("1321313")
}

const res = cheng(1, 100000);
console.log(res);
console.log(add(1, 2));

// js的热替换  针对的是非入口js文件
if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./js/test3', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    test3()
  });
}

if (module.hot) {
  module.hot.accept('./js/test', function() {
    const res = cheng(100, 100);
    console.log(res);
  });
}


/* 代码分割3 配置:
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
  webpackChunkName: 'test2' 打包之后的名字
*/
import(/* webpackChunkName: 'test2' */'./js/test2')
    .then((obj) => {
      // 文件加载成功~
      // eslint-disable-next-line
      console.log("文件加载成功~",obj);
    })
    .catch(() => {
      // eslint-disable-next-line
      console.log('文件加载失败~');
    });


// 非index.js文件的懒加载~：当文件需要使用时才加载~
// 预加载 prefetch：会在使用之前，提前加载js文件
document.getElementById('btn').onclick = function() {    // vue路由懒加载  基于这个实现的
    // 正常加载可以认为是并行加载（同一时间加载多个文件）
    // 预加载 prefetch特点：等其他资源加载完毕，浏览器空闲了，再偷偷加载该资源   兼容性差！！！  prefetch 与preload
    import(/* webpackChunkName: 'test4', webpackPrefetch: true */'./js/test4').then(({t,x}) => {
        console.log("t,x")
        // t()
        // x()
    });
};

//PWA (了解学习) ；离线访问技术
/*
  1. eslint不认识 window、navigator全局变量
    解决：需要修改package.json中eslintConfig配置
      "env": {
        "browser": true // 支持浏览器端全局变量
      }
   2. serviceWorker代码必须运行在服务器上
      --> nodejs
      -->简单创建静态资源服务器
        npm i serve -g
        serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去 (不试了 这里)
*/
// 注册serviceWorker
// 处理兼容性问题 离线访问
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
            .register('/service-worker.js')
            .then(() => {
                console.log('sw注册成功了~');
            })
            .catch(() => {
                console.log('sw注册失败了~');
            });
    });
}